<template>
  <SlitCardComp leftWidth="300px">
    <template #slitLeft>
      <div class="dept-header">
        <div class="dept-header-title">组织部门</div>
        <div class="dept-header-options">
          <t-tooltip content="搜索">
            <t-button class="dept-header-options-icon" shape="circle" variant="outline" size="small"
              @click="deptState.searchTextEnable = !deptState.searchTextEnable">
              <SearchIcon />
            </t-button>
          </t-tooltip>
          <t-tooltip content="刷新">
            <t-button class="dept-header-options-icon" shape="circle" variant="outline" size="small">
              <RefreshIcon />
            </t-button>
          </t-tooltip>
        </div>
      </div>
      <t-input v-if="deptState.searchTextEnable" v-model="deptState.searchText" style="margin-bottom: 10px;"
        @change="deptSearchChange">
        <template #suffixIcon>
          <search-icon />
        </template>
      </t-input>
      <t-tree ref="tree" :data="deptState.deptData" expand-on-click-node :filter="deptState.deptDataFilter" hover line
        :expand-level="1" />
    </template>
    <template #slitContent>
      <FormTableCardComp>
        <template #form>
          <t-form ref="form" :data="formData" scroll-to-first-error="smooth" colon @reset="onReset" @submit="onSubmit">

            <t-row :gutter="16">
              <t-col :span="10">
                <t-row :gutter="[16, 16]">
                  <t-col :span="4">
                    <t-form-item label="用户名称" name="name">
                      <t-input v-model="formData.name"></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :span="4">
                    <t-form-item label="名称" name="name">
                      <t-input v-model="formData.name"></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :span="4">
                    <t-form-item label="名称" name="name">
                      <t-input v-model="formData.name"></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :span="4">
                    <t-form-item label="名称" name="name">
                      <t-input v-model="formData.name"></t-input>
                    </t-form-item>
                  </t-col>
                </t-row>
              </t-col>
              <t-col :span="2" class="operation-container">
                <t-space size="small">
                  <t-button theme="primary" type="submit">提交</t-button>
                  <t-button theme="default" variant="base" type="reset">重置</t-button>
                </t-space>
              </t-col>
            </t-row>
          </t-form>
        </template>

        <template #table>
          <t-table v-model:columnControllerVisible="userState.columnControllerVisible" row-key="key"
            :data="userState.tableData" :columns="columns" lazy-load resizable bordered
            :pagination="{ defaultPageSize: 5, defaultCurrent: 1, total: 100 }"
            :column-controller="columnControllerConfig" :loading="userState.loading">
            <template #topContent>
              <div class="tale-toolbar">
                <div class="tale-toolbar-left">
                  <t-space size="small">
                    <t-button theme="primary" @click="userState.userEditVisible = true">
                      <template #icon> <add-icon /></template>
                      新增
                    </t-button>
                  </t-space>

                </div>
                <div class="tale-toolbar-right">
                  <t-space size="small">
                    <t-tooltip content="列表配置">
                      <t-button shape="circle" variant="text" @click="userState.columnControllerVisible = true">
                        <template #icon> <setting-icon /></template>
                      </t-button>
                    </t-tooltip>
                  </t-space>
                </div>
              </div>
            </template>

          </t-table>
        </template>
      </FormTableCardComp>
    </template>
  </SlitCardComp>

  <UserInfo v-model:visible="userState.userEditVisible" :user-info="userState.userInfo" />

</template>

<script setup lang="ts">
import { SlitCardComp, FormTableCardComp } from '@/components/ReCard'
import { SearchIcon, RefreshIcon, SettingIcon, AddIcon } from 'tdesign-icons-vue-next'
import { MessagePlugin, FormProps, TableProps } from 'tdesign-vue-next';
import UserInfo from './UserInfo.vue';

// ---------------------------------------
const deptState = reactive({
  searchText: '',
  searchTextEnable: false,
  deptData: [] as any[],
  deptDataFilter: undefined as any,
})

const deptSearchChange = (value: any) => {
  if (deptState.searchText) {
    deptState.deptDataFilter = (node: any) => {
      return node.label.includes(value)
    }
  } else {
    deptState.deptDataFilter = undefined
  }
}

deptState.deptData = [
  {
    value: '1',
    label: '1',
    children: [
      {
        value: '1.1',
        label: '1.1',
        children: [
          {
            value: '1.1.1',
            label: '1.1.1',
            children: [
              {
                value: '1.1.1.1',
                label: '1.1.1.1',
              },
              {
                value: '1.1.1.2',
                label: '1.1.1.2',
              },
            ],
          },
          {
            value: '1.1.2',
            label: '1.1.2',
            children: [
              {
                value: '1.1.2.1',
                label: '1.1.2.1',
              },
              {
                value: '1.1.2.2',
                label: '1.1.2.2',
              },
            ],
          },
        ],
      },
      {
        value: '1.2',
        label: '1.2',
        children: [
          {
            value: '1.2.1',
            label: '1.2.1',
            children: [
              {
                value: '1.2.1.1',
                label: '1.2.1.1',
              },
              {
                value: '1.2.1.2',
                label: '1.2.1.2',
              },
            ],
          },
          {
            value: '1.2.2',
            label: '1.2.2',
            children: [
              {
                value: '1.2.2.1',
                label: '1.2.2.1',
              },
              {
                value: '1.2.2.2',
                label: '1.2.2.2',
              },
            ],
          },
        ],
      },
    ],
  },
  {
    value: '2',
    label: '2',
    children: [
      {
        value: '2.1',
        label: '2.1',
      },
      {
        value: '2.2',
        label: '2.2',
      },
    ],
  },
];

// ---------------------------------------
// ---------------------------------------
const formData = reactive({
  name: '',
})

const onReset: FormProps['onReset'] = () => {
  MessagePlugin.success('重置成功');
};
const onSubmit: FormProps['onSubmit'] = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    MessagePlugin.success('提交成功');
  } else {
    console.log('Validate Errors: ', firstError, validateResult);
    MessagePlugin.warning(firstError as string);
  }
};

const userState = reactive({
  loading: false,
  columnControllerVisible: false,
  tableData: [],

  userEditVisible: false,
  userInfo: {
    name: '',
    tel: '',
    status: false,
    gender: ''
  }
});

// @ts-ignore
const tableData: TableProps['data'] = ref<Array<any>>([]);
const columns: TableProps['columns'] = [
  { colKey: 'serial-number', width: 80, title: '序号', align: 'center', },
  {
    colKey: 'applicant',
    title: '申请人',
    width: '100',
  },
  {
    colKey: 'channel',
    title: '签署方式',
  },
  {
    colKey: 'detail.email',
    title: '邮箱地址',
    ellipsis: true,
  },
  {
    colKey: 'createTime',
    title: '申请时间',
  },
];

const columnControllerConfig = computed(() => ({
  hideTriggerButton: true,
  // 允许哪些列参与显示-隐藏控制
  fields: ['applicant', 'channel', 'detail.email', 'createTime',],

  // 透传弹框组件全部属性
  dialogProps: { preventScrollThrough: true },
}));

// ---------------------------------------

</script>

<style scoped lang="less">
// 左侧部门筛选
.dept-header {
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--td-brand-color-2);
  margin-bottom: 10px;

  .dept-header-title {
    font-size: 16px;
    font-weight: 700;
  }

  .dept-header-options-icon+.dept-header-options-icon {
    margin-left: 10px;
  }
}

.operation-container {
  display: flex;
  justify-content: center;
}

.tale-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  margin-bottom: 10px;
}

.tale-toolbar-left {
  display: flex;
  align-items: center;
}
</style>
